<style lang="less">
  .ivu-poptip-rel{
    width: 100%;
  }
  .tem-card .ivu-form-item{
    margin-bottom: 24px;
  }
  .ivu-input-number{
    width: 100%;
  }
  .tem-card .ivu-form-item .ivu-select-selection{
    width: 100%;
  }
</style>
<template>
  <div class="tem-div">
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" @click="cancel" style="margin-left: 8px">取消</Button>
    </Card>
    <Card class="tem-card">
      <Collapse  v-model="panelValue1">
        <Panel name="1">
            基本信息
            <div slot="content">
              <Form ref="form" :model="formData" :rules="ruleValidate" label-position="right" :label-width="100">
                <Row  type="flex" justify="space-around">
                    <Col span="11">
                      <FormItem label="">
                        <RadioGroup ref='isheadstock' v-model="formData.isheadstock" @on-change="handlerRadioChange">
                            <Radio label="1">一体车（牵引车头）</Radio>
                            <Radio label="2">车挂</Radio>
                        </RadioGroup>
                      </FormItem>
                      <FormItem label="车牌号" prop="carnum">
                          <i-input ref='carnum' placeholder="车牌号" v-model="formData.carnum" ::maxlength="7"></i-input>
                      </FormItem>
                      <FormItem label="所属机构" prop="orgname">
                           <Poptip placement="bottom" v-model="showPoptip" style="width: 100%;">
                            <Input ref="pId" v-model="formData.orgname" @on-focus="handlerFocus" placeholder="请选择所属机构"></Input>
                            <div class="api" ref="tree" slot="content" style="text-align: left;">
                              <Tree :data="orgTree" @on-select-change="handleSelectTree"></Tree>
                            </div>
                          </Poptip>
                      </FormItem>
                      <FormItem label="使用部门">
                          <i-input placeholder="使用部门" v-model="formData.usedept"></i-input>
                      </FormItem>
                      <FormItem label="车辆业务类型">
                          <i-select placeholder="请选择车辆业务类型" v-model="formData.businessType">
                              <i-option v-for="item in businessTypeArray" :value="item.label" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="厢型" prop="carriagetype">
                          <i-select placeholder="请选择厢型" v-model="formData.carriagetype">
                            <i-option v-for="item in carriagetypeArray" :value="item.label" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="额定载重" prop="weight">
                          <i-input placeholder="额定载重" v-model="formData.weight" ::maxlength="6"><span slot="append">吨</span></i-input>
                      </FormItem>
                      <!-- 一体车（牵引车头）开始 -->
                      <FormItem label="百公里油耗"  v-if="this.formData.isheadstock !== '2'">
                          <InputNumber  placeholder="百公里油耗" v-model="formData.oilrefer" :max="999999">
                            <span slot="append">升/百公里</span>
                          </InputNumber>
                      </FormItem>
                      <FormItem label="里程因子"  v-if="this.formData.isheadstock !== '2'">
                          <InputNumber placeholder="里程因子" v-model="formData.mileageFactor" :max="999999"></InputNumber>
                      </FormItem>
                      <FormItem label="主驾司机"  v-if="this.formData.isheadstock !== '2'">
                          <i-select placeholder="请选择主驾司机" v-model="formData.mainDriverId" filterable  clearable>
                              <i-option v-for="(option, index) in driverOptions" :value="option.value" :key="index" :label="option.label"></i-option>
                          </i-select>
                      </FormItem>
                      <!-- 一体车（牵引车头）结束 -->
                      <FormItem label="轮胎数量">
                          <i-select placeholder="请选择轮胎数量" v-model="formData.tyreNumber">
                            <i-option v-for="item in tyreNumberArray"  :value="item.value" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <!-- 挂车 -->
                      <FormItem label="轴距" v-if="this.formData.isheadstock === '2'">
                          <i-input placeholder="轴距" v-model="formData.axleDistance"  ::maxlength="6"></i-input>
                      </FormItem>
                      <FormItem label="轴荷" v-if="this.formData.isheadstock === '2'">
                          <i-input placeholder="轴荷"  v-model="formData.axleLoad" ::maxlength="6"></i-input>
                      </FormItem>
                      <FormItem label="牵引销" prop="staticLoad" v-show="this.formData.isheadstock === '2'">
                          <i-input placeholder="牵引销最大静载荷" v-model="formData.staticLoad" ::maxlength="6"></i-input>
                      </FormItem>
                      <FormItem label="车挂车型" prop="hangingType">
                          <i-select placeholder="请选择车挂车型" v-model="formData.hangingType">
                            <i-option v-for="item in hangingTypeArray" :value="item.label" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="牵引车型号">
                          <i-input placeholder="牵引车型号" v-model="formData.tractorType"></i-input>
                      </FormItem>
                      <FormItem label="品牌">
                          <i-input placeholder="品牌" v-model="formData.brand"></i-input>
                      </FormItem>
                      <FormItem label="排放标准">
                          <i-input placeholder="排放标准" v-model="formData.emissionStandard"></i-input>
                      </FormItem>
                      <FormItem label="型号">
                          <i-input placeholder="型号" v-model="formData.carType"></i-input>
                      </FormItem>
                    </Col>
                    <Col span="11">
                      <FormItem style="height:32.89px"></FormItem>
                      <FormItem label="车辆别名">
                          <i-input placeholder="车辆别名" v-model="formData.carAlias"></i-input>
                      </FormItem>
                      <FormItem label="车队">
                          <i-input placeholder="车队" v-model="formData.motorcade"></i-input>
                      </FormItem>
                      <FormItem label="车挂类型" prop="usetype">
                          <i-select placeholder="请选择车挂类型" v-model="formData.usetype">
                            <i-option v-for="item in usetypeArray"  :value="item.label" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="车长" prop="length">
                          <i-input  placeholder="车长" v-model="formData.length" ::maxlength="6"><span slot="append">米</span></i-input>
                      </FormItem>
                      <FormItem label="车宽">
                        <InputNumber placeholder="车宽" v-model="formData.width" :max="999999"><span slot="append">米</span></InputNumber>
                      </FormItem>
                      <FormItem label="额定体积" prop="volume">
                          <i-input placeholder="额定体积" v-model="formData.volume" ::maxlength="6"><span slot="append">立方</span></i-input>
                      </FormItem>
                      <FormItem label="车厢尺寸">
                          <Row>
                            <Col span="6">
                                <InputNumber placeholder="车厢长" v-model="formData.carriagelen" :max="999999"><span slot="append">长/米</span></InputNumber>
                            </Col>
                            <Col span="3" style="text-align: center">X</Col>
                            <Col span="6">
                                <InputNumber placeholder="车厢宽" v-model="formData.carriagewidth" :max="999999"><span slot="append">宽/米</span></InputNumber>
                            </Col>
                            <Col span="3" style="text-align: center">X</Col>
                            <Col span="6">
                                <InputNumber placeholder="车厢高" v-model="formData.carriageheight" :max="999999"><span slot="append">高/米</span></InputNumber>
                            </Col>
                          </Row>
                      </FormItem>
                      <!-- 一体车（牵引车头） -->
                      <FormItem label="油耗因子" v-if="this.formData.isheadstock !== '2'">
                          <InputNumber placeholder="油耗因子" v-model="formData.scalingFactor" :max="999999"></InputNumber>
                      </FormItem>
                      <FormItem label="副驾司机"  v-if="this.formData.isheadstock !== '2'">
                          <i-select
                              placeholder="请选择副驾司机"
                              v-model="formData.depDriverId"
                              filterable
                              clearable>
                              <i-option v-for="(option, index) in driverOptions" :value="option.value" :key="index" :label="option.label"></i-option>
                          </i-select>
                      </FormItem>
                      <!-- 挂车 -->
                      <FormItem label="轮胎规格" v-if="this.formData.isheadstock === '2'">
                          <i-input placeholder="轮胎规格" v-model="formData.tyreSpec" ::maxlength="6"></i-input>
                      </FormItem>
                      <FormItem label="后轮距" v-if="this.formData.isheadstock === '2'">
                          <i-input placeholder="后轮距" v-model="formData.rearWheelDistance" ::maxlength="6"></i-input>
                      </FormItem>
                      <FormItem label="接近角 / 离去角" v-if="this.formData.isheadstock === '2'">
                           <Row>
                              <Col span="11">
                                  <InputNumber placeholder="接近角" v-model="formData.approach" :max="999999"></InputNumber>
                              </Col>
                              <Col span="2" style="text-align: center">/</Col>
                              <Col span="11">
                                  <InputNumber placeholder="离去角" v-model="formData.departure" :max="999999"></InputNumber>
                              </Col>
                          </Row>
                      </FormItem>
                      <FormItem label="出厂日期" prop="productionDate">
                          <DatePicker type="date" style="width:100%;"
                          placeholder="出厂日期"
                          v-model="formData.productionDate"></DatePicker>
                      </FormItem>
                      <FormItem label="GPS设备号">
                          <i-select
                              placeholder="搜索GPS设备号"
                              v-model="formData.gpsno"
                              filterable
                              clearable
                              remote
                              label-in-value
                              :remote-method="remoteGps"
                              :loading="selectLoading"
                              @on-change="handlerChangeGps">
                              <i-option v-for="(option, index) in gpsOptions" :value="option.value" :label="option.label" :key="index"></i-option>
                          </i-select>
                          <!-- <i-select placeholder="GPS设备号" v-model="formData.gpsId" filterable clearable>
                              <i-option v-for="option in gpsOptions" :value="option.value" :key="option.value">{{option.label}}</i-option>
                          </i-select> -->
                      </FormItem>
                      <FormItem label="车轴" prop="axleNumber">
                          <i-select placeholder="请选择车轴" v-model="formData.axleNumber">
                            <i-option v-for="(item, index) in axleNumberArray" :value="item.label"  :key="index" :lable="item.label"></i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="颜色">
                          <i-input placeholder="颜色" v-model="formData.carColor"></i-input>
                      </FormItem>
                      <FormItem label="联营车辆公司">
                          <i-input placeholder="联营车辆公司" v-model="formData.joinCompany"></i-input>
                      </FormItem>
                      <FormItem label="租赁车辆公司">
                          <i-input placeholder="租赁车辆公司" v-model="formData.rentalCompany"></i-input>
                      </FormItem>
                    </Col>
                </Row>
              </Form>
            </div>
        </Panel>
      </Collapse>
    </Card>
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" @click="cancel" style="margin-left: 8px">取消</Button>
    </Card>
  </div>
</template>
<script>
  import fetch from './service';
  import orgService from '@/page/main/userManage/org/service';
  import driverService from '@/page/main/infoManage/driver/service';
  import deviceService from '@/page/main/infoManage/device/service';

  export default {
    components: {
    },
    data () {
      return {
        selectLoading: false,
        panelValue1: '1',
        // 查询条件
        searchObj: {
        },
        showPoptip: false,
        // 车辆业务类型
        businessTypeArray: [
          {
            value: '1',
            label: '自营'
          },
          {
            value: '2',
            label: '连营'
          },
          {
            value: '3',
            label: '租用'
          }
        ],
        // 厢型
        carriagetypeArray: [
          {
            value: '1',
            label: '牵引车'
          },
          {
            value: '2',
            label: '低栏车'
          },
          {
            value: '3',
            label: '中栏车'
          },
          {
            value: '4',
            label: '高栏车'
          },
          {
            value: '5',
            label: '中巴车'
          },
          {
            value: '6',
            label: '平板车'
          },
          {
            value: '7',
            label: '厢式车'
          },
          {
            value: '8',
            label: '冷藏车'
          },
          {
            value: '9',
            label: '集装箱'
          },
          {
            value: '10',
            label: '超宽车'
          },
          {
            value: '11',
            label: '蓬车'
          },
          {
            value: '12',
            label: '其它车型'
          },
          {
            value: '13',
            label: '罐式车'
          },
          {
            value: '14',
            label: '高低板车'
          },
          {
            value: '15',
            label: '危险品车'
          },
          {
            value: '16',
            label: '自卸货车'
          }
        ],
        // 轮胎数量
        tyreNumberArray: [
          {
            value: '4',
            label: '4'
          },
          {
            value: '6',
            label: '6'
          },
          {
            value: '8',
            label: '8'
          },
          {
            value: '10',
            label: '10'
          },
          {
            value: '12',
            label: '12'
          },
          {
            value: '14',
            label: '14'
          },
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          }
        ],
        // 车挂车型
        hangingTypeArray: [
          {
            value: '1',
            label: '标车'
          },
          {
            value: '2',
            label: '新标'
          },
          {
            value: '3',
            label: 'T型车'
          },
          {
            value: '4',
            label: '六位车'
          },
          {
            value: '5',
            label: '中置轴'
          }
        ],
        // 挂车类型
        usetypeArray: [
          {
            value: '1',
            label: '6位标'
          },
          {
            value: '2',
            label: '12位标'
          },
          {
            value: '3',
            label: '13位标'
          },
          {
            value: '4',
            label: '16位标'
          },
          {
            value: '5',
            label: '18位T'
          },
          {
            value: '6',
            label: '21位T'
          }
        ],
        // 车轴
        axleNumberArray: [
           {
            value: '1',
            label: '四轴'
          },
          {
            value: '2',
            label: '五轴'
          },
          {
            value: '3',
            label: '六轴'
          }
        ],
        formData: {
          isheadstock: '1',
          gpsId: ''
        },
        ruleValidate: {
          carnum: [
            {required: true, message: '车牌号不能为空', trigger: 'blur'},
            {max: 20, message: '车牌号不能超过20个字符且不包含空格', trigger: 'blur'}
          ],
          orgname: [
            {required: true, message: '所属机构不能为空', trigger: 'blur'}
          ],
          carriagetype: [
            {required: true, message: '厢型不能为空', trigger: 'blur'}
          ],
          productionDate: [
            {required: true, type: 'date', message: '出厂日期不能为空', trigger: 'blur'}
          ],
          usetype: [
            {required: true, message: '挂车类型不能为空', trigger: 'blur'}
          ],
          length: [
            {required: true, message: '车长不能为空', trigger: 'blur'},
            {pattern: '^\\d+(?=\\.{0,1}\\d+$|$)', message: '只能输入数字或者小数', trigger: 'blur'}
          ],
          weight: [
            {required: true, message: '额定载重不能为空', trigger: 'blur'},
            {pattern: '^\\d+(?=\\.{0,1}\\d+$|$)', message: '只能输入数字或者小数', trigger: 'blur'}
          ],
          staticLoad: [
            {required: true, message: '牵引销最大静载荷不能为空', trigger: 'blur'},
            {pattern: '^\\d+(?=\\.{0,1}\\d+$|$)', message: '只能输入数字或者小数', trigger: 'blur'}
          ],
          hangingType: [
            {required: true, message: '车挂车型不能为空', trigger: 'blur'}
          ],
          axleNumber: [
            {required: true, message: '车轴不能为空', trigger: 'blur'}
          ],
          volume: [
            {required: true, message: '额定体积', trigger: 'blur'},
            {pattern: '^\\d+(?=\\.{0,1}\\d+$|$)', message: '只能输入数字或者小数', trigger: 'blur'}
          ]
        },
        orgTree: [],
        driverOptions: [],
        gpsOptions: [
          {
            value: '1',
            label: '111'
          },
          {
            value: '2',
            label: '222'
          },
          {
            value: '3',
            label: '333'
          }
        ]
      };
    },
    created () {
      // 初始化机构树
      // this.getOrgTree();
      // 初始化司机列表
      // this.getDriverList();
      // 初始化未绑定设备列表
      // this.getGpsList();
      // 初始化加载机构树
      this.init();
      console.log('gps', this.gpsOptions);
    },
    computed: {
      actionLoading () {
        return this.$store.state.app.actionLoading;
      }
    },
    methods: {
      init () {
        this.formData.id = this.$route.query.id;
        if (this.formData.id !== undefined && this.formData.id !== '') {
            this.getById(this.formData.id);
        }
        let data = {
          isheadstock: '2',
          staticLoad: '123'
        };
        // this.formData.isheadstock = '2';
        // this.formData.staticLoad = '123';
        setTimeout(() => {
          this.formData = data;
        }, 2000);
        // this.formData.gpsId = '4';
        // this.formData.gpsno = '44444';
        // this.gpsOptions.push({
        //   value: '4',
        //   label: '44444'
        // });
      },
      getById (carId) {
        fetch.getOne({id: carId}).then((result) => {
          this.$refs.carnum.disabled = true;
          this.$refs.isheadstock.$children[0].disabled = true;
          this.$refs.isheadstock.$children[1].disabled = true;
          console.log('gpsId', result.data.gpsId);
          if (result.data.gpsId !== '') {
            this.gpsOptions.push({
              value: result.data.gpsId,
              label: result.data.gpsno
            });
            // this.$set(this.gpsOptions, 'value', result.data.gpsId);
          }
          this.formData = result.data;
          console.log('formData', result.data.gpsId);
          this.formData.isheadstock = this.formData.isheadstock.toString();
          console.log('gpsOptions', this.gpsOptions);
        });
      },
      getOrgTree () {
        // 获取机构树
        let opt = {id: 1};
        orgService.getTree(opt).then((result) => {
          // 展开父级节点
          this.$set(result.data, 'expand', true);
          this.orgTree = [result.data];
        });
      },
      getDriverList () {
        let payload = {
            pageNum: 1,
            pageSize: 999
        };
        driverService.getList(payload).then((result) => {
            this.driverOptions = result.data.content.map(item => {
                return {
                    value: item.id,
                    label: item.name + ' ' + item.phone
                };
            });
        });
      },
      getGpsList () {
        let payload = {
            pageNum: 1,
            pageSize: 999,
            bindType: 0
        };
        deviceService.getList(payload).then((result) => {
          this.gpsOptions = result.data.content.map(item => {
              return {
                  value: item.id,
                  label: item.deviceNum
              };
          });
        });
      },
      addOrUp (name) {
        // 测试校园

        if (this.formData.isheadstock === '1') {
          this.formData.staticLoad = '1';
        }
        // 转换时间
        if (this.formData.productionDate !== '') {
          this.formData.productionDate = new Date(this.formData.productionDate);
        }
        console.log('提交formData', this.formData);
        console.log('this.formData.staticLoad', this.formData.staticLoad);
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log('提交formData', this.formData);
            this._hyTool.cal(true);
            // 区分一体车与挂车提交字段
            if (this.formData.isheadstock === '2') {
              this.formData.oilrefer = '';
              this.formData.mileageFactor = '';
              this.formData.scalingFactor = '';
              this.formData.mainDriverId = '';
              this.formData.depDriverId = '';
            } else {
              this.formData.axleDistance = '';
              this.formData.axleLoad = '';
              this.formData.staticLoad = '';
              this.formData.tyreSpec = '';
              this.formData.rearWheelDistance = '';
              this.formData.approach = '';
              this.formData.departure = '';
            }
            try {
              if (this.formData.id !== undefined && this.formData.id !== '') {
                let opt = {id: this.formData.id};
                fetch.updateApi(opt, this.formData).then((data) => {
                  this.$Notice.success({
                    title: '修改成功'
                  });
                  this.$router.push('/position/carBaseInfo');
                });
              } else {
                fetch.saveApi(this.formData).then((data) => {
                  this.$Notice.success({
                    title: '新增成功'
                  });
                  this.$router.push('/position/carBaseInfo');
                });
              }
              this._hyTool.cal(false);
            } catch (e) {}
          }
        });
      },
      // 取消
      cancel () {
        this.$Modal.confirm({
          title: '提示',
          content: '是否取消编辑车辆信息',
          onOk: () => {
            this.$router.push('/position/carBaseInfo');
          }
        });
      },
      // 一体车/挂车切换
      handlerRadioChange () {
        if (this.formData.isheadstock === '1') {
          this.formData.staticLoad = '1';
        } else {
          this.formData.staticLoad = '';
        }
        console.log(this.formData.staticLoad);
      },
      // 搜索未绑定gps设备
      remoteGps (query) {
        // if (query !== '') {
        //     this.selectLoading = true;
        //     let payload = {
        //         pageNum: 1,
        //         pageSize: 999,
        //         bindType: 0,
        //         deviceNum: query
        //     };
        //     deviceService.getList(payload).then((result) => {
        //       this.selectLoading = false;
        //       this.gpsOptions = result.data.content.map(item => {
        //           return {
        //               value: item.id,
        //               label: item.deviceNum
        //           };
        //       });
        //       console.log('this.gpsOptions', this.gpsOptions);
        //     });
        // } else {
        //     this.gpsOptions = [];
        // }
      },
      handlerFocus () {
        // 获取父级节点文本框宽度
        let inputWidth = this.$refs.pId.$el.offsetWidth;
        // 设置树div宽度
        this.$refs.tree.style.width = inputWidth - 32 + 'px';
      },
      handleSelectTree (node) {
        this.formData.orgname = node[0].title;
        this.formData.orgId = node[0].id;
        this.$refs.form.validateField('orgname');
        this.showPoptip = false;
      },
      handlerChangeGps (result) {
        this.formData.gpsno = result.label;
        this.formData.gpsId = result.value;
      }
    }
  };
</script>
